import { useState } from 'react';

// material-ui
import { useTheme } from '@mui/material/styles';
import TextField from '@mui/material/TextField';
import { Button, Grid, Stack, Typography } from '@mui/material';
import AnimateButton from 'components/ui-component/extended/AnimateButton';
// third-party
import OtpInput from 'react18-input-otp';
import Link from 'Link';
import * as Yup from 'yup';
import { getEmailCode, addEmailAuth } from 'service/workflowService';
import { useAlertSnackbar } from 'utils/alertSnackbar';
// ============================|| STATIC - CODE VERIFICATION ||============================ //

// 新增: Yup 验证方案
const validationSchema = Yup.object().shape({
  email: Yup.string().email('Must be a valid email').max(255).required('Email is required')
});

// 将常量单独提出
const OTP_LENGTH = 6;
// 新添加的参数是一个回调函数
const AuthCodeVerification = ({ continueCallback }) => {
  const alertSnackbar = useAlertSnackbar();
  const theme = useTheme();
  const [otp, setOtp] = useState();
  const [email, setEmail] = useState(''); // 新增：用于保存用户输入的邮箱
  const [emailValid, setEmailValid] = useState(true); // 新增：用于标记邮箱验证状态
  const borderColor = theme.palette.mode === 'dark' ? theme.palette.grey[200] : theme.palette.grey[300];
  const [isButtonDisabled, setIsButtonDisabled] = useState(true); // 新增：用于控制发送验证码按钮是否可用

  const handleOtpValidation = () => {
    const otpRegex = new RegExp(`^\\d{${OTP_LENGTH}}$`);
    return otpRegex.test(otp);
  };
  // 封装错误处理函数
  const handleError = (message, error = '') => {
    const finalMessage = error ? `${message}:${error}` : message;
    alertSnackbar(finalMessage, {
      alert: { color: 'error' },
      autoClose: 3000
    });
  };

  const handleSuccess = (message) => {
    // console.error(error);
    alertSnackbar(message, {
      alert: { color: 'success' },
      autoClose: 3000
    });
  };

  // 新增：用于处理发送验证码的操作
  const handleSendCode = async () => {
    if (!isButtonDisabled) {
      const response = await getEmailCode(email);
      if (response.error) {
        console.error(`发送验证码失败：${response.error}`);
        // 可以添加其他逻辑，比如弹出提示框
        handleError('验证码发送失败', response.error);
      } else {
        handleSuccess('验证码发送成功');
        // 发送验证码成功，可以添加其他逻辑，比如启动倒计时
      }
    }
  };

  // 文件位置：同原文件
  const handleAddEmailAuth = async () => {
    const otpRegex = /^\d{6}$/;
    if (!otpRegex.test(otp)) {
      // console.error('验证码必须是六位数字');
      handleError('验证码必须是六位数字');
      return;
    }

    if (email && otp) {
      const data = {
        email,
        code: otp
      };

      const response = await addEmailAuth(data);
      console.log('response', response);
      if (response.error) {
        // console.error(`添加邮箱授权失败：${response.error}`);
        // 修改：添加警告
        handleError(`添加邮箱授权失败：${response.error.message}`);
      } else {
        handleSuccess('添加邮箱授权成功');
        // 修改：关闭当前页面
        // window.close();
      }
    }
  };
  // 邮箱验证
  const handleEmailValidation = async () => {
    try {
      await validationSchema.validate({ email });
      setEmailValid(true); // 邮箱格式正确
      setIsButtonDisabled(false); // 邮箱格式正确，按钮可用
    } catch (error) {
      console.error('Invalid email:', error);
      setEmailValid(false); // 邮箱格式不正确
      setIsButtonDisabled(true); // 邮箱格式不正确，按钮不可用
    }
  };
  return (
    <Grid container spacing={3}>
      <Grid item xs={12}>
        <TextField
          label="邮箱"
          variant="outlined"
          fullWidth
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          onBlur={handleEmailValidation} // 修改：添加了onBlur事件用于验证邮箱
          error={!emailValid} // 新增：如果emailValid为false，输入框标红
          helperText={!emailValid ? '邮箱格式不正确' : ''} // 新增：如果emailValid为false，显示错误信息
        />
      </Grid>
      {/* 新增：用于发送验证码的 Grid */}
      <Grid item xs={12}>
        <Button
          onClick={() => handleSendCode('参数')}
          variant="contained"
          disabled={isButtonDisabled} // 新增：根据isButtonDisabled设置按钮是否可用
        >
          发送验证码
        </Button>
      </Grid>
      <Grid item xs={12}>
        <OtpInput
          value={otp}
          onChange={(otpNumber) => setOtp(otpNumber)}
          numInputs={OTP_LENGTH} // 修改为6位验证码
          containerStyle={{ justifyContent: 'space-between' }}
          inputStyle={{
            width: '100%',
            margin: '8px',
            padding: '10px',
            border: `1px solid ${borderColor}`,
            borderRadius: 4,
            ':hover': {
              borderColor: theme.palette.primary.main
            }
          }}
          focusStyle={{
            outline: 'none',
            border: `2px solid ${theme.palette.primary.main}`
          }}
        />
      </Grid>
      <Grid item xs={12}>
        {/* 修改：添加了 onClick 事件 */}
        <Button
          disableElevation
          fullWidth
          size="large"
          type="submit"
          variant="contained"
          disabled={!handleOtpValidation()} // 新增：禁用提交按钮，如果 OTP 无效
          onClick={handleAddEmailAuth}
        >
          继续
        </Button>
      </Grid>
      <Grid item xs={12}>
        <Grid item container direction="column" alignItems="center" xs={12}>
          <Typography
            component={Link}
            href="#"
            variant="subtitle1"
            sx={{ textDecoration: 'none' }}
            // textAlign={matchDownSM ? 'center' : 'inherit'}
          >
            没有收到邮件？请检查您的垃圾邮件过滤器，或者
          </Typography>
        </Grid>
      </Grid>
      <Grid item xs={12}>
        <AnimateButton>
          <Button disableElevation fullWidth size="large" type="submit" variant="outlined" color="secondary">
            重新发送验证码
          </Button>
        </AnimateButton>
      </Grid>
    </Grid>
  );
};
export default AuthCodeVerification;
